<!-- 
    说明： 职位列表页面
 -->
<template>
  <section class="page">
    <!-- 头部导航栏 -->
    <HeaderCom />
    <div class="content-page">
      <img src="@/assets/images/top-bg.png" alt="" class="top-img" />
      <div class="main">
        <div class="nav-com">
          <el-breadcrumb
            separator-class="el-icon-arrow-right"
            style="margin-bottom: 20px"
          >
            <el-breadcrumb-item :to="{ name: 'home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ name: 'hire' }">
              招聘专区
            </el-breadcrumb-item>
            <el-breadcrumb-item>
              <span style="color: #3d6cb0">{{
                $route.meta.title || "--"
              }}</span>
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="search_input_box">
           <div class="search_input_item">
             <van-field
                class=""
                v-model.trim="value1"
                left-icon="search"
                clearable
                @clear="searchInputBlur"
                placeholder="请输入关键字"
                @input="searchInputBlur"
            />
          </div>
        </div>
       
        <div class="favorite-condition">
          <van-row>
            <van-col span="12">
              <div class="city" @click="show = true">
                <span>{{ searchData.city? searchData.city : '全国' }}</span>
                <img src="../../assets/images/user/downdrop.png" alt="" />
              </div>
              <van-popup v-model="show" round position="bottom">
                <van-cascader
                  v-model="value"
                  active-color="#1989fa"
                  title="请选择所在地区"
                  :options="options"
                  @close="show = false"
                  @finish="onFinish"
                />
              </van-popup>
            </van-col>
            <van-col span="12" class="condition-right">
              <van-dropdown-menu>
                <van-dropdown-item title="行业类型" ref="item">

                <van-tree-select
                    height="55vw"
                    :items="items"
                    :main-active-index.sync="activeIndex"
                     :active-id.sync="activeIds"
                     @click-nav="clickNav"
                       @click-item="clickItem"
                  />
                <div class="search_btn_box">
                   <div class="search_btn search_left_btn" @click="searchReset">重置</div>
                   <div class="search_btn search_right_btn" @click="onConfirm">查看{{ showJobList? `${showJobList}职位`:'' }}</div>
                </div>
                </van-dropdown-item>
              </van-dropdown-menu>
            </van-col>
          </van-row>
        </div>
        <Search ref="searchCom"  class="pc_searchCom"/>
        <!-- <div> -->
            <el-empty description="暂无相关职位" style="width: 100%" v-if="jobList.length <= 0"></el-empty>
        <!-- </div> -->
       
        <JobCard :dataList="jobList" v-if="jobList.length > 0" />
        <el-pagination
          class="bottom-page"
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="pageSize"
          :page-sizes="[24, 36, 48, 60, 72, 84, 96]"
          @size-change="pagesizeHandle"
          @current-change="currentChange"
          :current-page="pageNo"
        >
        </el-pagination>
      </div>
      <FooterMenu />
    </div>
  </section>
</template>

<script>
import FooterMenu from "@/components/footerMenu/index.vue";
import HeaderCom from "@/components/header/index.vue";
import Search from "./components/jobSearch.vue";
import JobCard from "./components/jobCard.vue"; // 职业列表
import { getJobListOld } from "../../request/api";
import { provinceAndCityData, AreaDict } from "@/utils/frontDataDict.js";
import { getWorkPeriodName, getEducationName } from "../../utils/frontDataDict";
export default {
  // 组件名称
  name: "studentStyleDetails",
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: { HeaderCom, Search, JobCard, FooterMenu },
  // 组件状态值
  data() {
    return {
      showJobList: 0, // 查询条数
      provinceAndCityData,
      city: "全部", // 城市
      options: [],
      timeOption: [
        { text: "收藏时间由新到旧", value: "desc" },
        { text: "收藏时间由旧到新", value: "asc" },
      ],
      activeIndex: 0,
       items: [],
      show: false,
      activeIds: [],
      activeIndex: 0,
      value: '',
      value1: '',
      rangType: "desc", // 排序方式
      pageNo: 1,
      pageSize: 24,
      total: 0,
      jobList: [],
      searchData: {
        city: "",
        jobName: "",
        jobLanguage: "",
        industry: "",
        educations: [],
        recruitment: "",
        lowestSalary: "", // 最低薪资
        highestSalary: "", //最高薪资
      },
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {
    $route: {
      handler() {
        setTimeout(() => {
          let keyword = this.$route.query.keyword;
          this.searchData.jobName = keyword;
          this.$refs.searchCom.setOption("key", keyword);
          this.init();
        });
      },
      immediate: true,
    },
  },
  mounted() {
    this.options = this.getCityData(provinceAndCityData);
    this.items = this.getAreaDictData(AreaDict)
  },
  // 组件方法
  methods: {
    // 选中导航
    clickNav(e) {
      console.log(e)

    },
    // 选中项目
    clickItem(e) {
      this.searchData.industry = this.activeIds.length ? this.activeIds : null
      if (this.activeIds.length) {
        this.init(true);
      }
      console.log(e, this.activeIds, this.activeIndex)
    },
    // 重置
    searchReset() {
      this.pageNo = 1;
      this.activeIds = []
      this.searchData.industry = ''
       this.init();
    },
    // 提交查看
    onConfirm() {
      this.pageNo = 1;
      this.searchData.industry = this.activeIds.length ? this.activeIds : null 
      this.$refs.item.toggle();
      this.init();
    },
    // 处理城市
    getCityData(arr) {
      let newArr = arr.map((item) => {
        if (item.children) this.getCityData(item.children);
        item.text = item.label;
        return item;
      });
      return newArr;
    },
    // 处理行业
    getAreaDictData(AreaDict) {
      let data = AreaDict.map(item => {
        return {
          text: item.name,
          id: item.name,
          children: item.children.map(iitem => {
            return {
              text: iitem,
              id: JSON.stringify([item.name,iitem]),
            }
          })
        }
      })
      return data
    },
    searchInputBlur() {
      this.pageNo = 1;
      this.searchData.jobName = this.value1
      this.init();
    },
     // 提交城市
    onFinish({ selectedOptions }) {
      this.pageNo = 1;
      this.show = false;
      let cityName = selectedOptions.map((option) => option.text);
      this.searchData.city = cityName[1];
      this.init();
    },
    pagesizeHandle(val) {
      this.pageSize = Number(val);
      this.init();
    },
    currentChange(e) {
      this.pageNo = e;
      this.init();
    },
    init(showJobLength= false) {
      let params = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        sortField: {
          field: "j.order_num",
          order: "desc"
        }
      };
      if (this.searchData.recruitment) {
        params.identify = this.searchData.recruitment;
      }
      if (this.searchData.jobLanguage >= 0) {
        params.jobLanguage = ["其他", "中文", "英文"][
          this.searchData.jobLanguage
        ];
      }
      if (this.searchData.city) {
        params.city = this.searchData.city;
      }
      if (this.searchData.educations && this.searchData.educations.length) {
        params.educations = this.searchData.educations;
      }

      if (this.searchData.lowestSalary) {
        params.lowestSalary = parseInt(this.searchData.lowestSalary);
      }
      if (this.searchData.highestSalary) {
        params.highestSalary = parseInt(this.searchData.highestSalary);
      }

      if (this.searchData.industry) {
        params.industry = this.searchData.industry;
      }
      if (this.searchData.jobName) {
        params.jobName = this.searchData.jobName;
      }
      getJobListOld(params).then((res) => {
        if (res.data) {
          let data_list = res.data.list;
          data_list.forEach((v) => {
            // if (v.jobName.length > 5) {
            //   v.jobName = v.jobName.slice(0, 5) + "...";
            // }
            // if (v.companyName.length > 7) {
            //   v.companyName = v.companyName.slice(0, 7) + "...";
            // }
            try {
              if (Array.isArray(JSON.parse(v.education))) {
                v.education = getEducationName(v.education, true);
              }
            } catch {
              () => {};
            }
            try {
              if (Array.isArray(JSON.parse(v.industry))) {
                v.industry = JSON.parse(v.industry)[1];
                if (v.industry.length > 3) {
                  v.industry = v.industry.slice(0, 3) + "...";
                }
              }

              if (Array.isArray(JSON.parse(v.city))) {
                v.city = JSON.parse(v.city)[1];
              }
              if (Number(v.workPeriod) != NaN) {
                v.workPeriod = getWorkPeriodName(v.workPeriod);
              }
            } catch {
              () => {};
            }
          });
          if (showJobLength) {
            this.showJobList = data_list.length
          return
          }
          this.showJobList = 0
          this.jobList = data_list;
          this.total = res.data.total;
          // document.querySelector(".content-page").scrollTop = 0
            // chrome
          document.body.scrollTop = 10
          document.body.scrollTop = 0
          // firefox
          document.documentElement.scrollTop = 10
          document.documentElement.scrollTop = 0
          // safari
          window.pageYOffset = 10
          window.pageYOffset = 0
        }
      });
    },

    searchFun(data) {
      this.pageNo = 1;
      this.searchData = data;
      this.init();
    },
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.page {
  position: relative;
  width: 100%;
  height: 100%;
  background: #f5f8fa;

  .content-page {
    position: relative;
    width: 100%;
    height: 100%;
    padding-top: 100px;
    overflow-y: auto;
    .top-img {
      width: 100%;
      height: 170px;
      object-fit: cover;
    }
    .main {
      background: #fff;
      width: 1200px;
      margin: 15px auto 0;
      padding: 23px 30px;
    }
    .bottom-page {
      margin-top: 20px;
      text-align: center;
    }
  }
}
// /deep/ .el-pagination.is-background .btn-next,
// /deep/ .el-pagination.is-background .btn-prev,
// /deep/ .el-pagination.is-background .el-pager li {
//   background: #fff !important;
//   border: 1px solid #ebebec;
//   border-radius: 4px;
// }

// /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
//   background-color: #409eff !important;
//   color: #fff;
// }
/deep/ .el-breadcrumb__inner {
  font-size: 18px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #37383d;
  line-height: 28px;
  cursor: pointer;
}
/deep/ .el-select-dropdown__item {
  font-size: 10px !important;
}
// @media screen and (max-width: 1500px) {
//   .content-page .main {
//     max-width: 1000px !important;
//   }
// }

#app .el-pagination.is-background .el-pager li:not(.disabled).active {
  width: 32px !important;
  height: 32px !important;
}
.search_input_box{
  display: none;
}
.favorite-condition{
  display: none;
}

@media screen and (max-width: 480px) {
  .page{
    .content-page{
      overflow-y:visible;
      padding-top: 0.6rem;
      .main{
        width: 100%;
        margin: 0;
        padding: 0;
        .nav-com{
          display: none;
        }
        .pc_searchCom{
          display: none;
        }
      }
      .bottom-page{
        margin-bottom: 0.2rem;
      }
    }
  }
   /deep/ .van-dropdown-menu__bar {
    height: 0.45rem;
    background: none;
    box-shadow: none;
  }
  /deep/.van-dropdown-menu__title--active,.van-tree-select__item--active {
    color: #3D6CB0;
  }
  /deep/ .van-sidebar-item--select::before{
    background-color: #3D6CB0;
  }

  .search_input_box{
    display: block;
    padding-top: 0.01rem;
    .search_input_item{
        margin: 0.1rem;
        border: 0.01rem solid #f0f0f0;
        border-radius: 0.04rem;
        overflow: hidden;

    }
    

  }
  .favorite-condition {
    display: block;
    width: 100%;
    height: 0.45rem;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    // border-bottom: 1px solid #f0f0f0;
    background-color: #ffffff;
    // position: fixed;
    // top: 1.03rem;
    left: 0;
    .city {
      display: flex;
      height: 0.45rem;
      justify-content: center;
      align-items: center;
      img {
        width: 0.12rem;
        height: 0.07rem;
        margin-left: 0.25rem;
      }
    }
    .condition-right {
      position: relative;
      .dropdown-icon {
        position: absolute;
        width: 0.12rem;
        height: 0.07rem;
        top: 0.19rem;
        right: 0.2rem;
      }
      .search_btn_box{
        display: flex;
        width: 100%;
        height: 0.45rem;
        border-top: 0.01rem solid #F0F0F0;

        .search_btn{
          flex: 1;
          height: 0.45rem;
          line-height: 0.45rem;
          text-align: center;
        }
        .search_left_btn{
          color: #3D6CB0;
          // background-color: #fff;

        }
        .search_right_btn{
          color: #fff;
        background-color: #3D6CB0;

        }
      }
    }
  }
}
</style>
